<template>
  <j-modal title="污水检测结果" :width="600" :visible="visible" :confirmLoading="loading" switchFullscreen
    @cancel="handleCancel" @ok="handleOk">
    <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="行政区划" prop="detectAreaIdArr">
        <z-linkage-area placeholder="请选择行政区划" v-model="form.detectAreaIdArr" @rows="onRows"
          @change="setAdminDivisions" />
      </a-form-model-item>
      <a-form-model-item label="检测地点" prop="detectAreaDetail">
        <a-input v-model="form.detectAreaDetail" placeholder="请输入" />
      </a-form-model-item>
      <!-- <a-form-model-item label="检测次数" prop="detectNum">
        <a-input-number v-model="form.detectNum" placeholder="请输入" style="width:100%" />
      </a-form-model-item> -->
      <a-form-model-item label="检测时间" prop="detectTime">
        <a-date-picker v-model="form.detectTime" style="width:100%;" show-time valueFormat="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择" />
      </a-form-model-item>
      <a-form-model-item label="检测机构" prop="detectUnit">
        <a-input v-model="form.detectUnit" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item label="检测结果" prop="detectResult">
        <a-radio-group name="radioGroup" v-model="form.detectResult">
          <a-radio :value="1">阴性</a-radio>
          <a-radio :value="2">阳性</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="详细数据" prop="detailData">
        <a-textarea v-model="form.detailData" placeholder="请输入至少5个字符" :auto-size="{ minRows: 4, maxRows: 6 }" />
      </a-form-model-item>
      <a-form-model-item label="检测报告" prop="detectReport">
        <j-upload :accept="accept" v-model="form.detectReport" :number="1"></j-upload>
        <p>支持扩展名：.jpg .png .pdf </p>
      </a-form-model-item>
    </a-form-model>
  </j-modal>
</template>
<script>
import * as sewageCheck from '@/api/sjsk/help/sewageCheck.js'
export default {
  name: 'AddModal',
  data() {
    return {
      visible: false,
      form: {
        detectAreaIdArr: undefined
      },
      startValue: undefined,
      rules: {
        detectAreaIdArr: [{ required: true, message: '请选择' }],
        detectAreaDetail: [{ required: true, message: '请输入' }],
        // detectNum: [{ required: true, message: '请输入' }],
        detectTime: [{ required: true, message: '请选择' }],
        detectUnit: [{ required: true, message: '请输入' }],
        detectResult: [{ required: true, message: '请选择' }],
        detailData: [{ required: true, message: '请输入至少5个字符' }, { validator: this.textVerification }],
        detectReport: [{ required: true, message: '请选择' }],
      },
      loading: false,
      accept: '.jpg,.png,.pdf'
    }
  },
  async created() {
  },
  methods: {
    show(id) {
      this.visible = true
      if (id) {
        this.form.id = id
        this.getDetail(id)
      } else {
        this.form = {}
      }
    },
    getDetail(id) {
      sewageCheck.sewageListDetailResult(id).then(res => {
        if (res.success) {
          this.form = res.result
          this.form.detectAreaIdArr = this.form.detectAreaLevel.split(',') //行政区划回显
        }
      })
    },
    // 获取行政区划的值
    setAdminDivisions(value) {
      // console.log("1111")
      // console.log(value)
    },
    onRows(row) {
      // console.log("value")
      // console.log(row)
      let str = ""
      row.forEach(item => {
        str += item.title + "," //保存行政区划名称
      })
      this.form.detectArea = str.slice(0, str.length - 1) //删除最后一个逗号
      // console.log(this.form.interviewPlace)
    },
    textVerification(rule, value, callback) {
      if (value && value.length < 5) {
        callback("请输入至少5个字符");
      } else {
        callback()
      }
    },
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.form.detectAreaLevel = this.form.detectAreaIdArr.join(',') //转为字符串
          this.loading = true
          sewageCheck.addSewage(this.form).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok');
              this.visible = false
              this.loading = false
            } else {
              this.loading = false
              this.$message.warn(res.message)
            }
          })
            .catch(e => {
              this.loading = false
              this.$message.warn('请求失败！')
            })
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-space-item {
  width: 130px;
  flex: none;
}
</style>
